<template>
	<view class="page" style="padding: 3% 3%;">
		<Navbar title="家政人员设置"></Navbar>
		<view class="settingCleaning">
			<!-- 			<view class="titel">
				<view class="name"> 状态设置： </view>
				<view class="start">
					<view class="kx">
						<view class="i"></view> 空闲
					</view>
					<view class="fm">
						<view class="i"></view> 忙碌
					</view>
				</view>
			</view> -->
			<view class="settingCleaning_box">
				<view class="list">
					<view class="int">
						<view class="date"> 当前状态设置： </view>
						<view class="tabs">
							<!-- 点击上午时，传递 'am' 来更新 sw 属性 -->
							<view :class="['td', Status==0 ? 'action' : '']" @click="setform(0)"> 空闲 </view>
							<!-- 点击下午时，传递 'pm' 来更新 xw 属性 -->
							<view :class="['td', Status== 1 ? 'action' : '']" @click="setform(1)"> 忙碌 </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfo: uni.getStorageSync('USER_INFO'),
				Status: 0,
				formData: {}
			};
		},
		onLoad(e) {
			this.PurifierInfo()
		},
		methods: {
			// setform 方法用来切换日期对应的上午/下午状态
			setform(is) {
				this.Status = is;
				var panams = {
					id: this.userInfo.OtherId,
					status: this.Status
				}
				this.$u.api.UpdateEmpStatus(panams).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
				});
			},
			PurifierInfo() {
				var panams = {
					id: this.userInfo.OtherId
				}
				this.$u.api.AppEmpInfo(panams).then(res => {
					var Status = res.data.Status;
					this.Status = Status;
				});
			},
		}
	};
</script>
<style>
	css .settingCleaning {
		/* .settingCleaning 的样式 */
	}

	.settingCleaning .titel {}

	.settingCleaning .titel {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.settingCleaning .titel .name {
		font-size: 34rpx;
		color: #333333;
	}

	.settingCleaning .titel .start {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.settingCleaning .titel .start .kx {
		margin-right: 25rpx;
		display: flex;
		align-items: center;
	}

	.settingCleaning .titel .start .kx .i {
		display: block;
		width: 45rpx;
		height: 45rpx;
		border: 1rpx solid #D4E0E3;
		background-color: #ffffff;
		margin-right: 5rpx;
	}

	.settingCleaning .titel .start .fm {
		display: flex;
		align-items: center;
	}

	.settingCleaning .titel .start .fm .i {
		display: block;
		width: 45rpx;
		height: 45rpx;
		border: 1rpx solid #DD1A00;
		background-color: #DD1A00;
		margin-right: 5rpx;
	}

	.settingCleaning .settingCleaning_box {
		/* .settingCleaning_box 的样式 */
	}

	.settingCleaning .settingCleaning_box .list {
		/* .list 的样式 */
	}

	.settingCleaning .settingCleaning_box .list .int {
		margin-bottom: 5%;
	}

	.settingCleaning .settingCleaning_box .list .int .date {
		width: 100%;
		height: 68rpx;
		line-height: 68rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
	}

	.settingCleaning .settingCleaning_box .list .int .tabs {
		display: flex;
	}

	.settingCleaning .settingCleaning_box .list .int .tabs .td {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #D4E0E3;
		text-align: center;
		margin-right: 10%;
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
	}

	.settingCleaning .settingCleaning_box .list .int .tabs .action {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #DD1A00;
		background-color: #DD1A00;
		text-align: center;
		margin-right: 10%;
		font-weight: bold;
		font-size: 34rpx;
		color: #ffffff;
	}

	.settingCleaning .settingCleaning_box .list .int .tabs .td.action {
		/* .td.action 的样式 */
	}
</style>